<!-- 角色编辑弹窗 -->
<template>
  <div>
    <el-drawer :visible="drawerEditBoolen"
               size="50%"
               :before-close="handleClose"
               ref="drawer">
      <template v-slot:title>
        <span class="hLabel">{{ isUpdate ? '选择打印机打印小票' : '选择打印机打印小票' }}</span>
      </template>
      <div class="ele-body">
        <ele-pro-table ref="table"
                       :columns="columns"
                       :datasource="datasource"
                       tool-class="ele-toolbar-form"
                       row-key="id">
          <!-- 表头工具栏 -->
          <template v-slot:toolbar>

          </template>

          <template v-slot:img="{ row }">
            <div><img class="categoryImages"
                   :src="row.img"
                   alt="" /></div>
          </template>
          <template v-slot:content="{ row }">
            <div v-html="row.content"></div>
          </template>
          <template v-slot:status="{ row }">
            <el-switch :active-value="1"
                       :inactive-value="2"
                       v-model="row.status" />
          </template>
          <!-- 状态列 -->

          <template v-slot:discount_money="{ row }">
            <div>
              {{ row.discount_money }}
            </div>
          </template>
          <template v-slot:sort="{ row }">
            <i class="sort-handle el-icon-rank ele-text-secondary"
               style="cursor: move"></i>
            <div v-if="false">{{ row }}</div>
          </template>
          <!-- 操作列 -->
          <template v-slot:action="{ row }">
            <el-link type="primary"
                     :underline="false"
                     @click="openEdit(row)">
              打印小票
            </el-link>

          </template>
        </ele-pro-table>
      </div>
    </el-drawer>

  </div>
</template>

<script>


import { printing, printerList } from '@/api/smallTicketPrinting/index'
export default {
  name: 'pictureEdit',
  components: {},
  props: {
    drawerEditBoolen: {
      type: Boolean,
      default: false
    },
    // 修改回显的数据
    data: Object
  },
  data () {

    const DEFAULT_FORM = {
      // 分类名称
      name: '',
      //   分类图片
      img: '',
      // 排序号
      sort: '',


    };
    return {
      columns: [
        {
          columnKey: 'index',
          type: 'index',
          label: '序号',
          width: 60,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'name',
          label: '打印机名称',
          sortable: 'custom',
          minwidth: 105,
          align: 'center',
          showOverflowTooltip: true,

        },
        {
          prop: 'fe_user',
          label: '开发者user',
          sortable: 'custom',
          minwidth: 105,
          align: 'center',
          showOverflowTooltip: false,

        },
        {
          prop: 'fe_userkey',
          label: '开发者key',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: false
        },
        {
          prop: 'fe_key',
          label: '打印机识别码KEY',
          sortable: 'custom',

          showOverflowTooltip: true,

          align: 'center'
        },

        {
          prop: 'fe_sn',
          label: '打印机编号SN',
          align: 'center',
          sortable: 'custom',

          showOverflowTooltip: true,

        },
        {
          prop: 'store_id',
          label: '店铺id',
          align: 'center',
          sortable: 'custom',
          showOverflowTooltip: true,

        },
        {
          prop: 'create_time',
          label: '创建时间',
          align: 'center',
          sortable: 'custom',
          showOverflowTooltip: true,
          formatter: (_row, _column, cellValue) => {
            return this.$util.toDateString(cellValue, 'yyyy-MM-dd HH:mm');
          }
        },
        {
          columnKey: 'action',
          label: '操作',

          align: 'center',
          resizable: false,
          slot: 'action',
          hideInSetting: true,
          showOverflowTooltip: true
        }
      ],
      storageMode: '',
      options: [],
      imageUrl: '',
      imgViewArr: [],
      viewerVisible: false,
      // 表单数据
      form: { ...DEFAULT_FORM },
      dialogImageUrl: '',
      fileList: [],
      dialogVisible: false,


      // 是否是修改
      isUpdate: false,
      showChoose: false
    };
  },
  activated () {

  },
  methods: {
    /* 表格数据源 */
    datasource ({ page, limit, where }) {
      return printerList({
        page,
        limit,
        ...where,

      });
    },
    /* 刷新表格 */
    reload (where) {
      this.$refs.table.reload({ page: 1, where: where });
    },
    async openEdit (row) {
      console.log(row, this.data)
      const res = await printing({
        printer_id: row.id,
        type: 2,
        id: this.data.id
      })
      if (res.code == 0) {
        this.$message.success(res.message);
      }

    },

    /* 显示分配权限 */
    openAuth (row) {
      this.current = row;
      this.showAuth = true;
    },

    // 关闭抽屉
    handleClose () {
      console.log('查看详情');
      this.$emit('update:drawerEditBoolen', false);
    },

  },
  //   watch: {
  //     drawerEditBoolen (visible) {
  //       this.$nextTick(() => {
  //         if (visible) {
  //           console.log(this.data);

  //         } 
  //       });
  //     }
  //   }
};
</script>

<style lang="less" scoped>
/*隐藏input（type=number)右边的小箭头*/
/deep/.delInput input::-webkit-outer-spin-button,
/deep/.delInput input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/.delInput input[type='number'] {
  -moz-appearance: textfield;
}
.foodsDiv div {
  margin-left: 20px;
  margin-top: 10px;
}
.height83 {
  height: 83vh;
}
.hLabel {
  margin: 10px 0 20px;
  font-weight: 700;
  &::before {
    content: '';
    display: inline-block;
    vertical-align: top;

    margin-right: 5px;
    height: 23px;
    width: 6px;
    background-color: #1e6ceb;
  }
}
.drawer__footer {
  display: flex;
  justify-content: flex-start;
  margin-left: 15px;
}
</style>
